<template>
	<view class="carlist">
		<scroll-view scroll-y style="height: 100vh;">
			<view class="top">
				<image src="../../static/img/utils/car-banner.png"></image>
				<navigator url="help" hover-class="none" class="help-car">帮我选婚车</navigator>
			</view>
			<view class="brand">
				<view class="tit">热门品牌</view>
				<scroll-view class="scroll-view-brand" scroll-x="true">
					<view class="brand-list">
						<view class="item first-item" @click="onBrand()">
							<view class="img">
								<view class="iconfont icon-xiaoxi2"></view>
							</view>
							<view class="name">全部</view>
						</view>
						<view class="item" v-for="(item, index) in brandlist" :index="index" @click="onBrand(item.id)">
							<view class="img">
								<image :src="item.logo"></image>
							</view>
							<view class="name">{{ item.name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="list">
				<view class="list-tit1">
					<view><text :class="{ active: currentSwiper === 0 }" @click="onCarNav(0)">精选车队{{carPackageList.length == 0 ? '' : `·${carPackageList.length}`}}</text></view>
					<view><text :class="{ active: currentSwiper === 1 }" @click="onCarNav(1)">个性自选{{carList.length == 0 ? '' : `·${carList.length}`}}</text></view>
				</view>
				<view class="list-cont">
					<swiper @change="swiperChange" :style="{ height: swHeight + 'px' }" :current="currentSwiper">
						<swiper-item>
							<view class="tit-wrap">
								<view class="list-tit2">
									<view class="tit2-item" :class="{ active: packageType == 1 }" @click="packageType = 1">
										综合排序
										<view class="iconfont icon-minusnum"></view>
									</view>
									<view class="tit2-item" style="border-right: none;" :class="{ active: packageType != 1 }" @click="onPackageType">
										价格
										<view class="iconfont" :class="{'icon-minusnum' : priceType == 2, 'icon-minusnum-copy' : priceType == 3}"></view>
									</view>
								</view>
							</view>
							<view class="recommend2-list" v-if="carPackageList.length">
								<template v-for="(item, index) in carPackageList" :index="index">
									<navigator :url="'cardetail?id=' + item.id + '&type=2'" hover-class="none" class="recommend2-item">
										<image :src="item.imageArray !== null ? item.imageArray[0] : ''"></image>
										<view class="recommend2-label">
											<text class="label-1">头车：</text>
											<text class="label-2">{{ item.mainBrandName }}</text>
											{{ item.mainModelName }}/{{ item.mainNum }}辆
										</view>
										<view class="recommend2-label">
											<text class="label-1">跟车：</text>
											<text class="label-2">{{ item.normalBrandName }}</text>
											{{ item.normalModelName }}/{{ item.normalNum }}辆
										</view>
										<view class="recommend2-price">
											￥{{ item.jieqinPrice }}
											<text class="recommend-old-price">市场价￥{{ item.marketPrice }}</text>
										</view>
									</navigator>
								</template>
							</view>
						</swiper-item>
						<swiper-item>
							<view class="tit-wrap">
								<view class="list-tit2">
									<view class="tit2-item" :class="{ active: navTit === '' }" @click="(navTit = ''), (isNavShow = false)">
										综合排序
										<view class="iconfont" :class="[navTit === '' ? 'icon-minusnum-copy' : 'icon-minusnum']"></view>
									</view>
									<view class="tit2-item" :class="{ active: navTit === '颜色' }" @click="onNavList1('颜色')">
										颜色
										<view class="iconfont" :class="[navTit === '颜色' ? 'icon-minusnum-copy' : 'icon-minusnum']"></view>
									</view>
									<view class="tit2-item" :class="{ active: navTit === '款型' }" @click="onNavList1('款型')" style="border-right: none;">
										款型
										<view class="iconfont" :class="[navTit === '款型' ? 'icon-minusnum-copy' : 'icon-minusnum']"></view>
									</view>
								</view>
								<view class="tit-view" v-if="isNavShow">
									<view class="tit-view-t">{{ navTit }}</view>
									<view class="tit-view-list">
										<view class="tit-view-item" :class="{ active: isNavActive === item.id }" @click="onNavList2(item.id, navTit)"
										 v-for="(item, index) in navList" :index="index">
											{{ item.name }}
										</view>
									</view>
									<view class="tit-view-btn">
										<view class="btn1" @click="isNavActive = ''">重置</view>
										<view class="btn2" @click="onConfirm">确定</view>
									</view>
								</view>
							</view>
							<view class="recommend-list" v-if="carList.length">
								<template v-for="(item, index) in carList" :index="index">
									<navigator :url="'cardetail?id=' + item.id + '&type=1'" hover-class="none" class="recommend-item">
										<image :src="item.imageArray !== null ? item.imageArray[0] : ''"></image>
										<view class="recommend-label">
											<text>{{ item.brandName }}</text>
											{{ item.modelName }}
										</view>
										<view class="recommend-price">
											￥{{ item.jieqinPrice }}
											<text class="recommend-old-price">市场价￥{{ item.marketPrice }}</text>
										</view>
									</navigator>
								</template>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</scroll-view>
		<u-loading :visible="loading"></u-loading>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				loading: true,
				brandlist: [], //品牌列表
				carPackageList: [], //婚车套餐列表
				carList: [], //婚车列表
				swHeight: 500, //默认Swiper高度
				currentSwiper: 0, //默认Swiper页
				activeBrand: '', //默认全部品牌
				orderNum: '1', //默认综合排序
				levelId: '', //汽车级别id
				colorId: '', //颜色
				isNavShow: false, //nav隐藏
				packageType: 1, //婚车套餐排序
				priceType: 2, //套餐价格排序
				navTit: '', //nav隐藏
				isNavActive: '',
				navList: []
			};
		},
		onLoad(optin) {
			// Promise.all([this.getBrandlist(), this.getCarPackageList(), this.getCarList()]).then(r => {
			// 	setTimeout(() => {
			// 		this.loading = false;
			// 	}, 500)
			// })
			if(!uni.getStorageSync('brandList')){
				this.getBrandlist()
			}else{
				this.brandlist = uni.getStorageSync('brandList');
			}
		},
		onShow() {
			this.currentSwiper = this.$store.state.current
		},
		watch: {
			currentSwiper: {
				handler(newValue, oldValue) {
					if (newValue === 0) {
						this.carList = [];
						this.getCarPackageList();
					} else {
						this.carPackageList = [];
						this.getCarList();
					}
				},
				immediate: true
			},
			packageType(newValue, oldValue) {
				if (newValue == 1) {
					this.priceType = 2
				}
				this.getCarPackageList();
			}
		},
		methods: {
			...mapMutations(['brandList']),
			/**
			 * 点击套餐价格排序
			 */
			onPackageType() {
				if (this.priceType == 2) {
					this.packageType = 2
					this.priceType = 3
				} else {
					this.packageType = 3
					this.priceType = 2
				}
			},
			/**
			 * 点击确定
			 */
			onConfirm() {
				this.isNavShow = false;
				this.getCarList();
			},
			/**
			 * 点击nav筛选
			 */
			onNavList1(name) {
				this.isNavShow = true;
				this.navTit = name;
				if (name === '颜色') {
					this.$api.CarColorList().then(res => {
						this.navList = res.data;
					});
				} else if (name === '款型') {
					this.$api.CarLevelList().then(res => {
						this.navList = res.data;
					});
				}
			},
			onNavList2(id, tit) {
				this.isNavActive = id;
				switch (tit) {
					case '颜色':
						this.colorId = id;
						break;
					case '款型':
						this.levelId = id;
						break;
					default:
						break;
				}
			},
			/**
			 * 获取品牌
			 */
			getBrandlist() {
				this.$api.BrandList('').then(res => {
					this.brandlist = res.data;
					this.brandList(res.data);  //store设置brandList值
				});
			},
			/**
			 * 点击品牌
			 */
			onBrand(id) {
				if (id) {
					this.activeBrand = id;
				}
				this.loading = true;
				this.currentSwiper == 0 ? this.getCarPackageList() : this.getCarList();
			},
			/**
			 * 获取婚车套餐列表
			 */
			getCarPackageList() {
				this.$api.CarPackageList(this.$store.state.cityId, this.activeBrand, this.orderNum).then(res => {
					this.carPackageList = res.data;
					this.swHeight = uni.upx2px(628) * this.carPackageList.length + uni.upx2px(80);
					setTimeout(() => {
						this.loading = false;
					}, 500)
				});
			},
			/**
			 * 获取婚车列表
			 */
			getCarList() {
				this.$api.CarList(this.$store.state.cityId, this.activeBrand, this.orderNum, this.levelId, this.colorId).then(res => {
					this.carList = res.data;
					let odd = this.carList.length % 2;
					this.swHeight = odd ? ((uni.upx2px(158 * 2) * (this.carList.length + 1)) / 2 + uni.upx2px(100)) : ((uni.upx2px(
						158 * 2) * this.carList.length) / 2 + uni.upx2px(100));
					setTimeout(() => {
						this.loading = false;
					}, 500)
				});
			},
			/**
			 * 左右滑动
			 */
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			/**
			 * 点击菜单
			 */
			onCarNav(type) {
				this.currentSwiper = type;
			}
		}
	};
</script>

<style lang="scss">
	.carlist {

		// .isNavShow{
		// 	position: fixed;
		// 	height: 100vh;
		// 	width: 100%;
		// 	background-color: #000;
		// 	z-index: 99;
		// 	top: 0;
		// 	left: 0;
		// }
		.top {
			background-color: #fff;
			padding-bottom: 100upx;

			image {
				width: 100%;
				position: relative;
			}

			.help-car {
				background: var(--gradualRed);
				height: 90upx;
				width: 360upx;
				border-radius: 45upx;
				text-align: center;
				line-height: 90upx;
				color: #fff;
				font-size: 32upx;
				font-weight: bold;
				box-shadow: var(--redShadow);
				margin: -100upx auto 0;
				position: relative;
				z-index: 1;
			}
		}

		.brand {
			padding: 20upx 0;

			.tit {
				font-size: 40upx;
				font-weight: bold;
				color: #313131;
				padding: 0 20upx 20upx;
			}

			.scroll-view-brand {
				width: 100%;

				.brand-list {
					display: flex;

					.item {
						&.first-item {
							.img {
								background: var(--gradualBlue);

								.iconfont {
									color: #fff;
								}
							}
						}

						flex: 0 0 132upx;

						.img {
							box-shadow: var(--redShadow);
							margin: 0 auto;
							height: 100upx;
							width: 100upx;
							border-radius: 50%;
							overflow: hidden;
							display: flex;
							padding: 10upx;
							align-items: center;
							justify-content: center;
							background-color: #f0f0f0;

							image {
								width: 80upx;
								height: 80upx;
							}
						}

						.name {
							font-size: 28upx;
							color: #999;
							line-height: 1;
							padding-top: 20upx;
							text-align: center;
						}
					}
				}
			}
		}

		.list {
			border-top: 16upx solid #f5f5f5;
			background-color: #fff;
			min-height: calc(100vh - 390upx);

			.list-tit1 {
				display: flex;
				border-bottom: 2upx solid #e7e7e7;

				view {
					flex: 1;
					height: 90upx;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 32upx;
						color: #999;
						line-height: 90upx;

						&.active {
							color: #000;
							border-bottom: 4upx solid var(--pink);
						}
					}
				}
			}

			.tit-wrap {
				position: relative;

				.list-tit2 {
					display: flex;
					align-items: center;
					height: 80upx;
					border-bottom: 2upx solid #e7e7e7;

					.tit2-item {
						flex: 1;
						height: 50upx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28upx;
						color: #999;
						border-right: 2upx solid #e5e5e5;

						&.active {
							color: var(--pink);

							.iconfont {
								color: var(--pink);
							}
						}

						.iconfont {
							font-size: 24upx;
							padding-left: 10upx;
							color: #999;
						}
					}
				}

				.tit-view {
					background-color: #fff;
					position: absolute;
					width: 100%;
					z-index: 100;

					.tit-view-t {
						height: 80upx;
						line-height: 80upx;
						font-size: 32upx;
						color: #999;
						margin-top: 20upx;
						padding: 0 30upx;
					}

					.tit-view-list {
						display: flex;
						flex-flow: wrap;
						padding: 0 30upx 20upx;

						.tit-view-item {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 58upx;
							border-radius: 10upx;
							background-color: #f6f6f7;
							font-size: 28upx;
							color: #5a5a59;
							flex: 0 0 calc(25% - 6upx);
							margin-right: 8upx;
							margin-bottom: 16upx;

							&:nth-child(4n) {
								margin-right: 0;
							}

							&.active {
								color: #fff;
								background-color: var(--pink);
							}
						}
					}

					.tit-view-btn {
						height: 94upx;
						display: flex;

						view {
							flex: 1;
							height: 100%;
							align-items: center;
							display: flex;
							justify-content: center;
							font-size: 32upx;

							&.btn1 {
								color: var(--pink);
								background-color: #fff;
								border-top: 2upx solid #e6e6e6;
								border-bottom: 2upx solid #e6e6e6;
							}

							&.btn2 {
								color: #fff;
								background-color: var(--pink);
							}
						}
					}
				}
			}

			.recommend2-list {
				.recommend2-item {
					padding: 30upx 20upx;
					border-bottom: 2upx solid #f5f5f5;

					image {
						height: 400upx;
						width: 100%;
					}

					.recommend2-label {
						display: flex;
						height: 60upx;
						font-size: 32upx;
						color: #000;
						align-items: center;

						.label-1 {
							color: #999;
							height: 60upx;
							align-items: center;
							display: flex;
							line-height: 1;
						}

						.label-2 {
							font-size: 24upx;
							color: var(--pink);
							padding: 0 10upx;
							border: 2upx solid var(--pink);
							border-radius: 4upx;
							margin-right: 10upx;
						}
					}

					.recommend2-price {
						display: flex;
						height: 36upx;
						align-items: center;
						color: var(--red);
						font-size: 30upx;

						.recommend-old-price {
							font-size: 24upx;
							flex: auto;
							display: flex;
							justify-content: flex-end;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}

			.recommend-list {
				padding-left: 20upx;
				padding-top: 20upx;
				display: flex;
				flex-flow: wrap;

				.recommend-item {
					flex: 0 0 345upx;
					margin-right: 20upx;
					margin-bottom: 20upx;
					overflow: hidden;

					image {
						height: 200upx;
						width: 345upx;
						margin-bottom: 10upx;
					}

					.recommend-label {
						display: flex;
						height: 40upx;
						font-size: 28upx;
						color: #000;
						font-weight: 600;

						text {
							font-size: 24upx;
							color: var(--pink);
							padding: 0 10upx;
							border: 2upx solid var(--pink);
							border-radius: 4upx;
							margin-right: 10upx;
							font-weight: 400;
						}
					}

					.recommend-price {
						display: flex;
						height: 36upx;
						align-items: center;
						color: var(--red);
						font-size: 24upx;

						.recommend-old-price {
							flex: auto;
							display: flex;
							justify-content: flex-end;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>
